<style rel="stylesheet/scss" lang="scss" >
@import "./../../mixin.scss";

.orginfo-wrapper {
  //width: 50%;
  //float: left;
  //overflow: hidden;
  //height: 400px;
    width: 488px;
    height: 398px;
    float:left;
  .orginfo {
   // margin-right: 10px;
  }
  .orginfo-header {
    font-weight: 700;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.678431);
  }
  .orginfo-year {
    width: 80px;
    float: right;
  }

  .activity-time {
    padding: 4px 10px;
    cursor: pointer;
  }
  .activity-time-select {
    color: #ffffff;
    background: #4080ff;
    border-radius: 15px;
    i {
      display: inherit;
    }
  }
  .el-dropdown {
    margin-left: 10px;
  }
  .activity-header-right {
    float: right;
  }
  .bar-icon-window {
    margin-left: 10px;
    font-size: 10px;
    cursor: pointer;
    color: #adadad;
  }
  .el-card__header {
    border-bottom: 0;
  }
}
</style>
<template>
  <div class="orginfo-wrapper">
    <el-card
      v-loading="isLoading"
      :body-style="{ height:'340px' }"
      :class="[windowStatus ? 'full-screen' : '']"
      class="orginfo"
      shadow="never"
      element-loading-text="加载中..."
      style="background: #ffffff;"
    >
      <div slot="header">
        <span class="orginfo-header">组织信息统计(在职{{ userCount }}人)</span>
        <div class="activity-header-right">
          <el-dropdown
            @command="handleCommand"
          >
            <span class="activity-time activity-time-select">
              {{ year }}
              <i class="el-icon-caret-bottom" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="item of yearOptions"
                :key="item"
                :command="item"
              >
                {{ item }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <i
            @click="handleWindow()"
            :class=" windowStatus ? 'jeicon-minus':'jeicon-max' "
            class="jeicon  bar-icon-window"
          />
        </div>
      </div>
      <div
        id="orginfo-chart"
        :style="{height:'300px'}"
      />
    </el-card>
  </div>
</template>
<script>
import { fetchLoadUser } from '../../actions/manage';

export default {
  name: 'OrgInfo',
  data() {
    return {
      year: '',
      windowStatus: false,
      userCount: 0,
      data: {},
      isLoading: false,
      chart: {},
    };
  },
  computed: {
    yearOptions() {
      const currentYear = new Date().getFullYear();
      return [currentYear, currentYear - 1, currentYear - 2];
    },
  },
  watch: {
    windowStatus: {
      handler(curVal, oldVal) {
        // 全屏隐藏左边菜单栏
        if (curVal) {
          JE.setWestMenuVisible(false);
        } else {
          JE.setWestMenuVisible(true);
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.year = new Date().getFullYear();
    setTimeout(() => {
      document.querySelector('#orginfo-chart').style.width = `${document.querySelector('.orginfo').offsetWidth - 40 - 2}px`;
      this.chart = echarts.init(document.getElementById('orginfo-chart'), 'macarons');
      this.getUserData();
    }, 0);
  },
  methods: {
    handleCommand(item) {
      this.year = item;
      this.getUserData();
    },
    // 放大缩小页面
    handleWindow() {
      this.windowStatus = !this.windowStatus;
      setTimeout(() => {
        document.querySelector('#orginfo-chart').style.width = `${document.querySelector('.orginfo').offsetWidth - 40 - 2}px`;
        if (this.windowStatus) {
          document.querySelector('#orginfo-chart').style.height = `${document.querySelector('.orginfo').offsetHeight - 80}px`;
        } else {
          document.querySelector('#orginfo-chart').style.height = '300px';
        }
        this.chart.resize();
      });
    },
    chartOption() {
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          formatter: (v) => {
            const year = `${this.year}年${v[0].axisValue}<br />`;
            // const rz = `新入职人数${this.data.rz[v[1].dataIndex]} <br />`;
            // const lz = `离职人数${v[0].value} <br /> 离职率 ${this.data.lzv[v[1].dataIndex]}%`;
            if (v.length > 1) {
              return `${year}新入职人数 ${this.data.rz[v[1].dataIndex]} <br />离职人数 ${v[0].value} <br /> 离职率 ${this.data.lzv[v[1].dataIndex]}%`;
            }
            if (v[0].seriesName.indexOf('入职') > -1) {
              return `${year}新入职人数 ${this.data.rz[v[0].dataIndex]} <br />`;
            }
            return `${year}离职人数 ${v[0].value} <br /> 离职率 ${this.data.lzv[v[0].dataIndex]}%`;
          },
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: this.data.types,
        },
        // color: ['#ff9f7f', '#9fe6b8'],
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#cccccc',
              },
            },
            axisLabel: {
              color: '#333333',
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#cccccc',
              },
            },
            axisLabel: {
              color: '#333333',
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
              },
            },
          },
        ],
        series: [
          {
            name: this.data.types ? this.data.types[0] : '离职员工',
            type: 'line',
            // stack: '总量',
            areaStyle: {},
            // lineStyle: {
            //   color: '#ff9f7f'
            // },
            data: this.data.lz || [],
          },
          {
            name: this.data.types ? this.data.types[1] : '新入职员工',
            type: 'line',
            // lineStyle: {
            //   color: '#9fe6b8'
            // },
            areaStyle: {},
            // stack: '总量',
            data: this.data.rz || [],
          },
        ],
      });
      window.onresize = this.chart.resize();
    },
    getUserData() {
      this.isLoading = true;
      fetchLoadUser({ year: this.year }).then((data) => {
        this.isLoading = false;
        this.userCount = data.userCount;
        this.data = data;
        this.chartOption();
      });
    },

  },
};
</script>
